<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-08 14:55:13
 * @LastEditTime: 2020-04-17 17:16:25
 * @LastEditors: Please set LastEditors
 -->
 <template>
    <div
        :id="`contextBodyTaskPcNew-${treeId}-${type}`"
        style="position:relative;width:100%;height:100%;color: #515a6e;"
        :key="`contextBodyTaskPcNew-${treeId}-${type}`"
    >
        <!-- 技能树复制 -->
        <div class="treeList" v-if="type == 'edit'">
            <div style="writing-mode: vertical-lr;text-align:center;">技能树</div>
            <Divider type="vertical" style="height:100%;flex:none;" />
            <div style="flex: 1 0 auto;max-width:230px;">
                <div style="display: flex;margin-bottom: 10px;">
                    <Input
                        suffix="ios-search"
                        size="small"
                        search
                        v-model="queryObj.name"
                        placeholder="输入技能树名称"
                        @on-search="searchTree"
                        style="width: auto;"
                    /><Icon
                        type="ios-refresh"
                        size="22"
                        @click="refresh()"
                        style="margin-left:4px;cursor:pointer;"
                    />
                </div>
                <Page
                    class="mt16"
                    size="small"
                    :total="treeListTotal"
                    :current="queryObj.pageIndex"
                    :page-size="queryObj.pageSize"
                    show-total
                    show-elevator
                    simple
                    @on-change="pageChange"
                    @on-page-size-change="sizeChange"
                />
            </div>
            <Divider type="vertical" style="height:100%;flex:none;" />
            <div
                v-show="showNavBtn"
                class="navBtn"
                @click="handleClick('left')"
                :class="disPrevBtn ? 'not-allowed' : 'pointer'"
            >
                <Icon size="16" type="md-arrow-dropleft" />
            </div>
            <div class="treeListScrollWrapper" style="flex:auto;overflow:hidden;">
                <div class="treeListWrapper" v-if="treeList.length > 0">
                    <div
                        v-for="tree in treeList"
                        :key="tree.id"
                        class="treeItem"
                        @dragover.prevent
                        @dragstart="dragTree($event, tree.id)"
                        @dragend="dragend"
                        :draggable="type === 'edit' ? true : false"
                        :style="{ cursor: type === 'edit' ? 'move' : 'auto' }"
                    >
                        <Icon type="ios-git-merge" :size="28" />
                        <span class="treeName" :title="tree.name">{{ tree.name }}</span>
                    </div>
                </div>
                <div v-else style="height: 100%;line-height: 60px;text-align: center;font-size: 14px;">没有查询到可用技能树</div>
            </div>
            <div
                v-show="showNavBtn"
                class="navBtn"
                @click="handleClick('right')"
                :class="disNextBtn ? 'not-allowed' : 'pointer'"
            >
                <Icon size="16" type="md-arrow-dropright" />
            </div>
        </div>
        <div id="childrenNode" class="modeRight2" style="z-index: 9" v-if="(type === 'edit' || type === 'edit-prev')  &&
                        currentNode &&
                        currentNode.data &&
                        currentNode.data.isLeafNode">
            <!-- <div id="" class="nodeText"  @click="addChildrenStep"
                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                    onMouseOut="this.style.backgroundColor=''">
                <span class="menuSpan">添加子步骤</span>
            </div> -->
            <div
                id=""
                class="nodeText"
                @click="deleteStep"
                v-if="
                    type === 'edit' && !collect 
                "
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该节点</span>
            </div>
            <div
                id=""
                class="nodeText"
                @click="$parent.appendRelative('', currentNode)"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">绑定训练内容</span>
            </div>
            <div
                id=""
                class="nodeText"
                @click="setCheck"
                v-if="type == 'prev'"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">选中节点树</span>
            </div>
        </div>
        <div id="linePanel" class="modeRight2" style="z-index: 9" v-if="type === 'edit' && !collect ">
            <div
                id=""
                class="nodeText"
                @click="deleteLine(currentNode.id, currentNode)"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该连线</span>
            </div>
        </div>
        <div id="stopPanel" class="modeRight2" style="z-index: 9" v-if="this.type === 'edit' && !collect ">
            <div
                id=""
                class="nodeText"
                @click="deleteStep"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该节点</span>
            </div>
        </div>
        <div style="position: absolute;width: 46px;" v-if="this.type === 'edit'">
            <Divider />
            <div
                class="rightNav"
                @dragover.prevent
                @dragstart="dragTaskTypeConfigSingle($event, 'dataType', '')"
                @dragend="dragend"
                :draggable="type === 'edit' ? true : false"
                :style="{ cursor: type === 'edit' ? 'move' : 'auto' }"
                style="margin:8px 0px;cursor:move"
            >
                <img src="../../../assets/tree/node-default-1.png" class="dragImage" />
                <span style="display:inline-block;width:100%;text-align:center">节点</span>
            </div>
            <Divider />
            <!-- <div class="rightNav" @dragover.prevent @dragstart="dragTree($event,'dataType','')" @dragend="dragend" draggable="true" style="margin:8px 0px;cursor:pointer">
            <img src="../../../assets/tree/node-default-1.png" class="dragImage" />
            <span style="display:inline-block;width:100%;text-align:center">技能树</span>
        </div> -->
        </div>
        <!-- 左侧功能区 -->
        <div
            style="position: absolute;width: 46px; top:200px;background: #ffffff;"
            v-if="this.type === 'edit'"
        >
            <Divider />
            <!-- 拖动 -->
            <div
                @click="listenTopoStatusChange('drag')"
                style="height: 36px; line-height: 36px;cursor: pointer;text-align: center;"
            >
                <img
                    v-if="lineType === 'drag'"
                    src="../../../assets/tree/td_blue.png"
                    style="vertical-align:middle"
                />
                <img
                    v-if="lineType !== 'drag'"
                    src="../../../assets/tree/td_hui.png"
                    style="vertical-align:middle"
                />
            </div>
            <Divider />
            <!-- 连线 -->
            <div
                @click="listenTopoStatusChange('line')"
                style="height: 36px; line-height: 36px;cursor: pointer;text-align: center;"
            >
                <img
                    v-if="lineType === 'line'"
                    src="../../../assets/tree/lx_blue.png"
                    style="vertical-align:middle"
                />
                <img
                    v-if="lineType !== 'line'"
                    src="../../../assets/tree/lx_hui.png"
                    style="vertical-align:middle"
                />
            </div>
            <Divider />
            <!-- 缩放 -->
            <div style="height: 36px; line-height: 36px;cursor: pointer;text-align: center;">
                {{ scale }}
            </div>
        </div>
        <canvas
            :id="`drawCanvasTeaskNew-${treeId}-${type}`"
            width="502"
            height="417"
            ref="drawCanvasTeaskNew"
            @drop="drop"
            @dragover.prevent
        ></canvas>
    </div>
</template>

<script>
import axios from '@/libs/axios';
import $ from 'jquery';
import { debounce, throttle } from '@/libs/utils';
import { experType } from '@/api/dict';
import {
    querySkillChapter,
    addSkillChapter,
    getAllSkillLinks,
    querySkill,
    getAllSkillNodes,
    modifySkillChapter,
    addLink,
    delLink
} from '@/api/selfStudy/skill.js';
export default {
    name: 'processControlNew',
    props: {
        treeId: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'edit'
        },
        dictList: {
            type: Array,
            default: () => []
        },
        collect:{
            type: Boolean,
            default: false
        }
    },
    components: {},
    data() {
        return {
            treeList: [], //树列表
            treeListTotal: 0,
            preId: '',
            queryObj: {
                pageIndex: 1,
                pageSize: 10,
                name: '',
                available: 1
            },
            editorTaskControl: '',
            currentTriigerId: '',
            config: {
                stageFrames: 500,
                eagleEyeVsibleDefault: true,
                defaultScal: 0.95,
                defaultWidth: 100,
                defaultHeight: 70,
                lnodeFontColor: '51,51,51',
                noderotateValue: 0.5,
                nodeScale: 0.2,
                nodeAlpha: 1,
                nodeStrokeColor: '200,200,200', // 灰粉色
                nodeFillColor: '255,255,255',
                nodeShadow: false,
                nodeShadowColor: 'rgba(255,255,255,1)',
                nodeFont: '14px/30px Consolas', //字体尺寸大小
                nodeFontText: '22px/30px ', //字体
                nodeFontColor: '0,0,0', //步骤名字的字体颜色---黑色
                nodeBorderRadius: 5,
                nodeShadowOffsetX: 3,
                nodeShadowOffsetY: 6,
                lineWidth: 0.5,
                lineDecriptionWidth: 20,
                lineAlpha: 1,
                lineStrokeColor: '0,0,0',
                lineFontColor: '0,0,0',
                lineShadow: false,
                lineShadowColor: 'rgba(255,255,255,1)',
                lineFontText: '22px/30px Consolas',
                offsetGap: 40,
                arrowsRadius: 0,
                direction: 'horizontal',
                LineJoin: 'lineJoin',
                dashedPattern: 5,
                containerAlpha: 1,
                containerFillColor: '221,235,249', //淡淡淡的蓝白色
                containerStrokeColor: '255,255,255', //白色
                containerFontColor: '0,0,0',
                containerFont: '18px/30px ',
                containerBorderRadius: 5,
                containerShadowOffsetX: 3,
                containerShadowOffsetY: 6,
                containerBorderRadius: 5,
                containerShadowOffsetX: 3,
                containerShadowOffsetY: 6,
                Textalpha: 1,
                TextfillColor: '233,223,152', //淡黄色
                Textshadow: false,
                TextshadowColor: '0,0,107',
                Textfont: '22px/30px Consolas',
                TextfontColor: '0,0,0',
                TextborderRadius: 15,
                TextShadowOffsetX: 3,
                TextShadowOffsetY: 6,
                TextX: 60,
                TextY: 10
            },
            timeId: null,
            layout: {},
            stage: null,
            scene: null,
            //拓扑层次导航
            selectLevel: '',
            //是否显示参考线
            showRuleLine: true,
            //标尺线数组
            ruleLines: [],
            //移动设备过程中用到的参数
            mouse_number: 0, //通过计数器进行限制
            groupcount: [], //移动线条
            //记录坐标用
            this_x: 0,
            this_y: 0,
            child_x: [],
            child_y: [],
            //用于判断是否是一直连线状态
            oLIneBol: false,
            //用于判断子网和网络是展开状态还是关闭状态
            networkBol: true,
            subnetBol: true,
            //用于记录是否显示报警
            clearClickTimer: null,
            currentNode: null,
            //课件流程控制
            childrenNode: $('#childrenNode'),
            linePanel: $('#linePanel'),
            pauseResverPanel: $('#pauseResverPanel'),
            stopPanel: $('#stopPanel'),
            nodeJSONstring: '',
            modeIdIndex: 0,
            lineType: 'drag', //line
            //存放节点id
            startNodeLine: null,
            endNodeLine: null,
            //存放节点
            beginNode: null,
            endNode: null,
            tempNodeA: null,
            tempNodeZ: null,
            link: null,
            currentSceneId: '',
            nodeLocationGroup: [], //存储位置
            nodeLocationIdGroup: [],
            showNavBtn: false,
            disPrevBtn: true,
            disNextBtn: false,
            scale: '100%',
            reqDictList:[]
        };
    },
    computed:{
        useDictList(){
            return this.dictList.length > 0 ?  this.dictList : this.reqDictList
        }
    },
    watch: {
        treeId(val, oldVal) {
            if (!val || !this.dictList || this.dictList.length == 0) {
                return;
            }
            this.scene && this.scene.clear();
            this.loadProcessData(val,'new');
        },
        useDictList(val,oldVal){
            if(val && val.length > 0 && this.treeId){
                this.scene && this.scene.clear();
                this.loadProcessData(this.treeId,'new');
            }
        }
    },
    created() {
        window.addEventListener('resize', (e) => {
            this.debounceResize();
        });
        if(!Object.keys(this.$options.propsData).includes('dictList')){ //如果没有传递dict，就请求
            this.queryWeightList()
        }
    },
    mounted() {
        //获取可用树列表
        if (this.type === 'edit') {
            let treesWrapper = document.querySelector('.treeListScrollWrapper');
            if (treesWrapper) {
                this.queryObj.pageSize = Math.max(
                    10,
                    Math.floor((treesWrapper.offsetWidth + 10) / 110)
                );
            }
            this.getTreeList();
        }
        if (this.treeId && this.useDictList && this.useDictList.length > 0) {
            this.loadProcessData(this.treeId,'new');
        }
    },
    beforeDestroy() {},
    destroyed() {
        this.initAll();
    },
    methods: {
        debounceResize: debounce(function() {
            if (this.stage) {
                let width = this.$el.offsetWidth; //this.$el.offsetWidth + 'px';
                let height = this.$el.offsetHeight; //this.$el.offsetHeight + 'px';
                this.stage.canvas.width = width;
                this.stage.canvas.height = this.type === 'edit' ? height - 80 : height;
                this.scene.centerAndZoom();
            }
        }, 1000),
        //获取权重列表
        async queryWeightList() {
            const { code, attribute, message } = await experType('newDirectionType');
            if (code == 1) {
                this.reqDictList = attribute.attribute[0].dictEntryList;
            } else {
                this.$Message.error(message);
            }
        },
        getTreeList() {
            let params = { ...this.queryObj };
            if (!this.queryObj.name) {
                delete params.name;
            }
            querySkill(params).then((data) => {
                if (data.code === 1) {
                    this.treeList = data.data.items;
                    this.treeListTotal = data.data.total;
                    if (this.type == 'edit') {
                        this.$nextTick(() => {
                            this.setBtnShow();
                        });
                    }
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        searchTree() {
            this.queryObj.pageIndex = 1;
            this.getTreeList();
        },
        refresh() {
            this.queryObj.name = '';
            this.pageChange(1);
        },
        pageChange(page) {
            this.queryObj.pageIndex = page;
            this.getTreeList();
        },
        sizeChange(size) {
            this.queryObj.pageSize = size;
            this.getTreeList();
        },
        listenTopoStatusChange(value) {
            this.lineType = value;
        },
        // 拖拽
        dragend(event) {
            event.dataTransfer.clearData();
        },
        // 单次型任务
        dragTaskTypeConfigSingle(a, b, c) {
            event.dataTransfer.setData('dataType', 'leaf');
        },
        dragTree(e, id) {
            this.preId = id;
            event.dataTransfer.setData('dataType', 'tree');
        },
        // 持续型任务
        dragTaskTypeDataPers(a, b, c) {
            event.dataTransfer.setData('dataType', 'node' + '-' + c);
        },
        //hover样式
        setActive(node) {
            //清空之前的hover
            this.stage.childs.forEach(function(s) {
                s.childs.forEach((n) => {
                    if (n.strokeColor === '0,127,238') {
                        //之前选中的清空
                        n.strokeColor = '163,163,163';
                        n.fillColor = '255,255,255';
                        if (n.elementType === 'node' && !n.data.image) {
                            if (!n.data.isLeafNode) {
                                // n.setImage(require('../../../assets/tree/root-default-1.png'));
                                n.setImage(require('../../../assets/tree2/start.png'));
                            } else {
                                // n.setImage(require('../../../assets/tree/node-default-1.png'));
                                n.setImage(require('../../../assets/tree2/default.png'));
                            }
                        }
                    }
                });
            });
            if (node.strokeColor !== '255,165,0') {
                node.strokeColor = '0,127,238';
                node.fillColor = '255,255,255';
                if (node.elementType === 'node' && !node.data.image) {
                    if (!node.data.isLeafNode) {
                        // node.setImage(require('../../../assets/tree/root-hover-1.png'));
                        node.setImage(require('../../../assets/tree2/start.png'));
                    } else {
                        // node.setImage(require('../../../assets/tree/node-hover-1.png'));
                        node.setImage(require('../../../assets/tree2/light.png'));
                    }
                }
            }
            // this.$emit('node-hover',node)
        },
        //获取当前节点及节点下下所有的节点和连线
        getAllNextLinkAndNode(node, links = [], nodes = [], copyTree = {}) {
            nodes.push(node);
            if (node.outLinks) {
                copyTree.children = node.outLinks.map((link) => link.nodeZ.data);
                node.outLinks.forEach((link) => {
                    links.push(link);
                    let tnode = this.getNodeByKey('id', link.id);
                    this.getAllNextLinkAndNode(tnode, links, nodes, link.nodeZ.data);
                });
            }
        },
        //批量创建节点和连线
        createCopyNodesAndLinks(data) {
            this.loadProcessData(this.treeId);
            // let { nodes, links } = data;
            // //添加节点
            // nodes.forEach((node) => {
            //     this.createNodeContainerCode(node);
            // });
            // //添加连线
            // links.forEach((link) => {
            //     this.addLink(link);
            // });
        },
        initAll() {
            this.stage &&
                this.stage.childs.forEach(function(s) {
                    s.childs.forEach((n) => {
                        n.strokeColor = '163,163,163';
                        if (n.elementType === 'node' && !n.data.image) {
                            n.fillColor = '255,255,255';
                            if (!n.data.isLeafNode) {
                                // n.setImage(require('../../../assets/tree/root-default-1.png'));
                                n.setImage(require('../../../assets/tree2/start.png'));
                            } else {
                                // n.setImage(require('../../../assets/tree/node-default-1.png'));
                                n.setImage(require('../../../assets/tree2/default.png'));
                            }
                        }
                    });
                });
        },
        //选中样式
        setCheck() {
            //清空之前的选中
            this.stage.childs.forEach(function(s) {
                s.childs.forEach((n) => {
                    // 255,165,0
                    // if (n.strokeColor === '255,165,0') {
                        //之前选中的清空
                        n.strokeColor = '163,163,163';
                        if (n.elementType === 'node' && !n.data.image) {
                            if (!n.data.isLeafNode) {
                                // n.setImage(require('../../../assets/tree/root-default-1.png'));
                                n.setImage(require('../../../assets/tree2/start.png'));
                            } else {
                                // n.setImage(require('../../../assets/tree/node-default-1.png'));
                                n.setImage(require('../../../assets/tree2/default.png'));
                            }
                        }
                    // }
                });
            });
            //获取与当前节点连线的所有节点,设置选中样式
            let nodes = [],
                links = [],
                copyTree = {};
            this.checkedNodes = [];
            this.checkedLinks = [];
            copyTree = this.currentNode.data;
            this.getAllNextLinkAndNode(this.currentNode, links, nodes, copyTree);
            nodes.forEach((node) => {
                node.strokeColor = '255,165,0';
                if (!node.data.image) {
                    if (!node.data.isLeafNode) {
                        node.setImage(require('../../../assets/tree2/start.png'))
                        // node.setImage(require('../../../assets/tree/root-check.png'));
                    } else {
                        node.setImage(require('../../../assets/tree2/light.png'));
                        // node.setImage(require('../../../assets/tree/node-check.png'));
                    }
                }
            });
            links.forEach((link) => {
                link.strokeColor = '0,127,238' //'255,165,0';
            });
            //存储一下纯数据
            this.checkedNodes = nodes.map((node) => node.data);
            this.checkedLinks = links.map((link) => {
                return {
                    careerSkillId: this.$route.query.id,
                    source: link.nodeA.id,
                    target: link.nodeZ.id
                };
            });
            $('#childrenNode').hide();
            this.$emit('node-check', {
                copyTree,
                nodes: this.checkedNodes,
                links: this.checkedLinks
            });
        },
        //树形展开，获取所有节点
        getAllChildrens(datas, nodes) {
            datas.forEach((item) => {
                nodes.push(item);
                if (item.children) {
                    this.getAllChildrens(item.children, nodes);
                }
            });
        },
        // 画图的函数
        async loadProcessData(id,type) {
            let _this = this;
            let nodesData = [];
            let lines = [];
            let copyTree = [];
            await getAllSkillLinks(id).then(({ code, data, message }) => {
                if (code === 1) {
                    lines = data;
                }
            });
            // await getAllSkillNodes(id).then(({code,data,message})=> {
            //     if(code === 1){
            //         nodesData = data.items;
            //         
            //         if(nodesData.length === 0){
            //             this.createNodeData('','root')
            //         }
            //     }
            // })
            await querySkillChapter(id).then(({ code, data, message }) => {
                if (code === 1) {
                    let nodes = data.items;
                    copyTree = data.items[0];
                    this.getAllChildrens(nodes, nodesData);
                }
            });
            _this.initializationEditorPanel(nodesData, lines,type);
            this.preTreeId = id;
            if ((!nodesData || nodesData.length === 0) && this.type === 'edit') {
                //默认创建一个根节点
                this.createNodeData('', 'root');
            }
            _this.nodeLocationIdGroup = nodesData.map((node) => node.id);
            _this.nodeLocationGroup = nodesData; //节点位置存储
            if (this.type === 'check') {
                this.$emit('node-check', { copyTree:'', nodes: '', links: '' });
            }
        },
        initializationEditorPanel(nodeDataJson, linkDataJson,type) {
            var canvas = null;
            canvas = document.getElementById(`drawCanvasTeaskNew-${this.treeId}-${this.type}`);
            canvas.width = this.$el.offsetWidth; //this.$el.offsetWidth + 'px';
            canvas.height = this.$el.offsetHeight; //this.$el.offsetHeight + 'px';
            if (this.type === 'edit') {
                canvas.height = canvas.height - 80;
            }
            let editorTaskControl = this;
            if(type === 'new'){
                this.stage = new JTopo.Stage(canvas);
                this.scene = new JTopo.Scene(this.stage);
                this.stage.topoLevel = 1;
                this.stage.parentLevel = 0;
                this.scene.totalLevel = 1;
            }else{
                this.scene && this.scene.clear();
            }
            this.modeIdIndex = 0;
            // this.scene = this.stage.childs[0];
            var that_this = this;
            //创建节点
            nodeDataJson &&
                nodeDataJson.forEach((node) => {
                    editorTaskControl.modeIdIndex++;
                    that_this.createNodeContainerCode(node);
                });
            //创建连线
            linkDataJson &&
                linkDataJson.forEach((link) => {
                    this.addLink(link);
                });
            $(`#contextBodyTaskPcNew-${this.treeId}-${this.type}`).on('contextmenu',(e) => {
                e.preventDefault()
                return false;
            })
            //加载数据以后自动实现绘画功能
            var w = $(`#contextBodyTaskPcNew-${this.treeId}-${this.type}`).width(),
                wc = editorTaskControl.stage.canvas.width,
                h = $(`#contextBodyTaskPcNew-${this.treeId}-${this.type}`).height(),
                hc = editorTaskControl.stage.canvas.height;
            if (w > wc) {
                editorTaskControl.stage.canvas.width = w;
            }
            if (h > hc) {
                editorTaskControl.stage.canvas.height = this.type === 'edit' ? h - 80 : h;
            }
            editorTaskControl.stage.paint();
            nodeDataJson.length > 0 && this.scene.centerAndZoom();
            var self = this;
            let scale = parseFloat(editorTaskControl.scene.scaleX).toFixed(2);
            this.stage.onMouseWheel = (event) => {
                let scene = self.stage.childs[0];
                event = event || window.event;
                if (event.wheelDelta) {
                    //判断浏览器IE，谷歌滑轮事件
                    if (event.wheelDelta > 0) {
                        scene.scaleX += 0.05;
                        scene.scaleY += 0.05;
                    }
                    if (event.wheelDelta < 0) {
                        scene.scaleX -= 0.05;
                        scene.scaleY -= 0.05;
                    }
                } else if (event.detail) {
                    //Firefox滑轮事件
                    if (event.detail < 0) {
                        scene.scaleX += 0.05;
                        scene.scaleY += 0.05;
                    }
                    if (event.detail > 0) {
                        scene.scaleX -= 0.05;
                        scene.scaleY -= 0.05;
                    }
                }
                scale = parseFloat(scene.scaleX).toFixed(2);
                if (scale > 2) {
                    scene.scaleX = 2;
                    scene.scaleY = 2;
                    scale = 2;
                    // scene.zoomIn(1);
                }
                if (scale < 0.3) {
                    scene.scaleX = 0.3;
                    scene.scaleY = 0.3;
                    scale = 0.3;
                    // scene.zoomIn(1);
                }
                self.scale = parseInt(scale * 100) + '%';
            };
            this.stage.frames = this.config.stageFrames;
            this.stage.wheelZoom = null;
            this.stage.eagleEye.visible = this.type === 'edit' ? true : false;
            //用来连线的两个节点
            this.tempNodeA = new JTopo.Node('tempA');
            this.tempNodeA.setSize(1, 1);
            this.tempNodeZ = new JTopo.Node('tempZ');
            this.tempNodeZ.setSize(1, 1);
            this.beginNode = null;
            this.link = null;
            self.scene.mode = this.type === 'edit' || this.type === 'check' || this.type === 'edit-prev'? 'normal' : 'drag';
            //双击编辑文字
            this.scene.dbclick(function(e) {
                if (e.target) self.currentNode = e.target;
                else return;
                //双击节点
                if (
                    e.target != null &&
                    (e.target instanceof JTopo.Node || e.target instanceof JTopo.Container)
                ) {
                    if (e.target.dataType == 'start' || e.target.dataType == 'stop') {
                    } else {
                        self.type !== 'check' && self.$parent.editTree(e, e.target);
                    }
                }
            });
            //失去焦点,设置节点文字
            //     //清除起始节点不完整的拖放线
            this.scene.mousedown(function(e) {
                if (
                    self.link &&
                    !self.isSelectedMode &&
                    (e.target == null || e.target === self.beginNode || e.target === self.link)
                ) {
                    this.remove(self.link);
                }
            });
            var ThisNode;
            var self_w = this.scene;
            var oLinkType;
            //处理右键菜单，左键连线
            self_w.mouseup(function(e) {
                // e.stopPropagation();
                // e.preventDefault();
                clearTimeout(editorTaskControl.clearClickTimer);
                editorTaskControl.clearClickTimer = setTimeout(function() {
                    $('#childrenNode').hide();
                    $('#linePanel').hide();
                    $('#stopPanel').hide();
                    $('#pauseResverPanel').hide();
                    if (e.target) self.currentNode = e.target;
                    // editorTaskControl.utils.clearRuleLines();
                    else if (
                        e.target &&
                        e.target instanceof JTopo.Node &&
                        e.target.layout &&
                        e.target.layout.on &&
                        e.target.layout.type &&
                        e.target.layout.type != 'auto'
                    )
                        JTopo.layout.layoutNode(this, e.target, true, e);
                    if (e.button == 2) {
                        //右键菜单
                        $("div[id$='Menu']").hide();
                        var menuY = e.layerY ? e.layerY + 16 : e.offsetY + 16;
                        var menuX = e.layerX ? e.layerX + 16 + 200 : e.offsetX + 16;
                        if (e.target) {
                            if (self.type === 'check') {
                                return;
                            }
                            //处理节点右键菜单事件
                            if (
                                e.target instanceof JTopo.Node ||
                                e.target instanceof JTopo.Container
                            ) {
                                //节点
                                var selectedNodes = editorTaskControl.getSelectedNodes();
                                //多节点
                                if (selectedNodes && selectedNodes.length > 1) {
                                    //判断边界出是否能完整显示弹出菜单
                                    if (menuX + self.groupMangeMenu.width() >= self.stage.width) {
                                        menuX -= self.groupMangeMenu.width();
                                    }
                                    if (menuY + self.groupMangeMenu.height() >= self.stage.height) {
                                        menuY -= self.groupMangeMenu.height();
                                    }
                                    self.groupMangeMenu
                                        .css({
                                            top: menuY + 25,
                                            left: menuX
                                        })
                                        .show();
                                } else {
                                    self.nodeJSONstrin = editorTaskControl.initNodeDeailInformation(
                                        self.currentNode.id
                                    );
                                    // console.log(selectedNodes[0].dataType);
                                    if (
                                        selectedNodes[0].dataType == 'start' ||
                                        selectedNodes[0].dataType == 'process'
                                    ) {
                                        //右键开始按钮
                                        //判断边界出是否能完整显示弹出菜单
                                        if (
                                            menuX + $('#childrenNode').width() >=
                                            self.stage.width
                                        ) {
                                            menuX -= $('#childrenNode').width();
                                        }
                                        if (
                                            menuY + $('#childrenNode').height() >=
                                            self.stage.height
                                        ) {
                                            menuY -= $('#childrenNode').height();
                                        }
                                        $('#childrenNode')
                                            .css({
                                                top: menuY,
                                                left: menuX - 120
                                            })
                                            .show();
                                    } else if (selectedNodes[0].dataType == 'stop') {
                                        if (menuX + $('#stopPanel').width() >= self.stage.width) {
                                            menuX -= $('#stopPanel').width();
                                        }
                                        if (menuY + $('#stopPanel').height() >= self.stage.height) {
                                            menuY -= $('#stopPanel').height();
                                        }
                                        $('#stopPanel')
                                            .css({
                                                top: menuY,
                                                left: menuX - 120
                                            })
                                            .show();
                                    } else if (
                                        selectedNodes[0].dataType == 'pause' ||
                                        selectedNodes[0].dataType == 'recovery'
                                    ) {
                                        if (
                                            menuX + $('#pauseResverPanel').width() >=
                                            self.stage.width
                                        ) {
                                            menuX -= $('#pauseResverPanel').width();
                                        }
                                        if (
                                            menuY + $('#pauseResverPanel').height() >=
                                            self.stage.height
                                        ) {
                                            menuY -= $('#pauseResverPanel').height();
                                        }
                                    } else {
                                        if (
                                            menuX + $('#childrenNode').width() >=
                                            self.stage.width
                                        ) {
                                            menuX -= $('#childrenNode').width();
                                        }
                                        if (
                                            menuY + $('#childrenNode').height() >=
                                            self.stage.height
                                        ) {
                                            menuY -= $('#childrenNode').height();
                                        }
                                        // console.log(self.currentNode,e.layerX,self.scene.translateX);
                                        $('#childrenNode')
                                            .css({
                                                top: menuY,
                                                left: menuX - 180
                                            })
                                            .show();
                                    }
                                }
                            } else if (e.target instanceof JTopo.Link) {
                                //连线右键菜单
                                if (e.target.lineType == 'rule') {
                                    editorTaskControl.utils.hideRuleLines(); //删除标尺线
                                } else {
                                    $('#linePanel')
                                        .css({
                                            top: e.layerY ? e.layerY + 16 : e.offsetY + 16,
                                            left: e.layerX
                                                ? e.layerX + 16 + 200 - 120
                                                : e.offsetX + 16 + 200 - 120
                                        })
                                        .show();
                                }
                            } else if (e.target instanceof JTopo.Container) {
                                //容器右键菜单
                                if (e.target.hasOwnProperty('netsubs')) {
                                    self.containerNetsubsMenu
                                        .css({
                                            top: e.layerY ? e.layerY : e.offsetY,
                                            left: e.layerX ? e.layerX : e.offsetX
                                        })
                                        .show();
                                } else if (e.target.hasOwnProperty('netsubts')) {
                                    self.containerNetsubtsMenu
                                        .css({
                                            top: e.layerY ? e.layerY : e.offsetY,
                                            left: e.layerX ? e.layerX : e.offsetX
                                        })
                                        .show();
                                } else {
                                    self.containerMangeMenu
                                        .css({
                                            top: e.layerY ? e.layerY : e.offsetY,
                                            left: e.layerX ? e.layerX : e.offsetX
                                        })
                                        .show();
                                }
                            }
                        } else {
                        }
                    } else if (e.button == 1) {
                        //中键
                    } else if (e.button == 0) {
                        if (self.type === 'check') {
                            self.setCheck(e.target); //check右键选中
                            return;
                        }
                        //左键
                        //复制连线类型,方便连线时进行判断
                        if (self.lineType == 'drag') {
                            self.isSelectedMode = true;
                        } else if (self.lineType == '') {
                            //为镜像线做准备
                            self.isSelectedMode = false;
                            oLinkType = '';
                        } else if (self.lineType == 'dotted') {
                            //正常连线
                            self.isSelectedMode = false;
                            oLinkType = 'dotted';
                        } else if (self.lineType == 'direction') {
                            //方向线
                            self.isSelectedMode = false;
                            oLinkType = 'direction';
                        } else if (self.lineType == 'line') {
                            self.isSelectedMode = false;
                        } else {
                            self.isSelectedMode = true; //默认不连线
                        }
                        if (
                            e.target != null &&
                            (e.target instanceof JTopo.Node ||
                                e.target instanceof JTopo.Container) &&
                            !self.isSelectedMode
                        ) {
                            //开始连线
                            if (self.beginNode == null) {
                                $('#nodeIdClick_start').val(e.target.id);
                                $('#LineDestinationa').val(e.target.id);
                                self.startNodeLine = e.target.id;
                                var bol = e.target.issave;
                                self.beginNode = e.target;
                                // if(e.target instanceof JTopo.Container) {
                                //     if(self.link)
                                //         this.remove(self.link);
                                //     self.beginNode = null;
                                //     return;
                                // }
                                if (self.lineType == 'dotted') {
                                    self.link = new JTopo.Link(self.tempNodeA, self.tempNodeZ);
                                    self.link.lineType = 'dotted';
                                    self.link.lineWidth = self.config.lineWidth;
                                    self.link.dashedPattern = 2;
                                } else if (self.lineType == 'direction') {
                                    self.link = new JTopo.Link(self.tempNodeA, self.tempNodeZ);
                                    self.link.lineType = 'direction';
                                    self.link.direction = 'direction';
                                    self.link.lineWidth = 20;
                                } else if (self.lineType == 'line') {
                                    //为镜像线准备
                                    self.link = new JTopo.FlexionalLink(
                                        self.tempNodeA,
                                        self.tempNodeZ
                                    );
                                    self.link.direction = 'vertical'; //'horizontal';
                                    self.link.arrowsRadius = 30;
                                    self.link.arrowsOffset = -15;
                                    self.link.lineWidth = 1.5; // 线宽
                                    self.link.offsetGap = 20;
                                    self.link.bundleGap = 15; // 线条之间的间隔
                                    self.link.textOffsetY = 10; // 文本偏移量（向下15个像素）
                                    self.link.strokeColor = '201,201,202';
                                    self.link.lineType = 'line';
                                    self.link.type = 'tree';
                                    self.link.dataType = 'tree';
                                    self.link.lineWidth = self.config.lineWidth;
                                }
                                self.link.shadow = self.config.showLineShadow;
                                self.link.strokeColor = JTopo.util.randomColor();
                                self_w.add(self.link);
                                self.tempNodeA.setLocation(e.x, e.y);
                                self.tempNodeZ.setLocation(e.x, e.y);
                            } else if (
                                e.target &&
                                (e.target instanceof JTopo.Node ||
                                    e.target instanceof JTopo.Container) &&
                                self.beginNode !== e.target
                            ) {
                                //结束连线
                                //单机进行end
                                self.endNode = e.target;
                                self.endNodeLine = e.target.id;
                                var l;
                                if (self.lineType == 'line') {
                                    //为镜像线准备
                                    l = new JTopo.FlexionalLink(self.beginNode, self.endNode);
                                    l.direction = 'vertical';
                                    l.arrowsRadius = 30;
                                    l.arrowsOffset = -15;
                                    l.lineWidth = 1.5; // 线宽
                                    l.offsetGap = 20;
                                    l.bundleGap = 15; // 线条之间的间隔
                                    l.textOffsetY = 10; // 文本偏移量（向下15个像素）
                                    l.strokeColor = '0,0,0'; //拖拽连线松开鼠标后变色
                                    l.lineType = 'line';
                                    l.type = 'tree';
                                    l.dataType = 'tree';
                                    l.id = '';
                                    l.zIndex = 3;
                                } else if (self.lineType == 'dotted') {
                                    l = new JTopo.Link(self.beginNode, self.endNode);
                                    l.lineWidth = editorTaskControl.config.lineWidth;
                                    l.strokeColor = editorTaskControl.config.strokeColor;
                                    l.alpha = editorTaskControl.config.alpha;
                                    l.dashedPattern = editorTaskControl.config.dashedPattern;
                                    l.arrowsRadius = editorTaskControl.config.arrowsRadius;
                                    l.lineType = 'dotted';
                                    l.zIndex = 2;
                                } else if (self.lineType == 'direction') {
                                    l = new JTopo.Link(self.beginNode, self.endNode);
                                    l.lineType = 'direction';
                                    l.lineWidth = 20;
                                    l.strokeColor = '255,128,128';
                                    l.alpha = 1;
                                    l.arrowsRadius = 0;
                                    l.offsetGap = '30';
                                    l.zIndex = 5;
                                }
                                self_w.add(l);
                                self.createLink(self.startNodeLine, self.endNodeLine, l);
                                self.beginNode = null;
                                self.endNode = null;
                                self_w.remove(self.link);
                                self.link = null;
                                if (!self.oLIneBol) {
                                    $('#drag').click();
                                }
                            } else {
                                if (self.link) self_w.remove(self.link);
                                self.beginNode = null;
                            }
                        } else {
                            if (self.link) self_w.remove(self.link);
                            self.beginNode = null;
                        }
                        editorTaskControl.groupcount = [];
                        editorTaskControl.mouse_number = 0;
                        editorTaskControl.this_x = 0;
                        editorTaskControl.this_y = 0;
                        editorTaskControl.child_x = [];
                        editorTaskControl.child_y = [];
                        if (e.target != null) {
                            if (e.button == 0 && e.target.elementType == 'node') {
                                //e.target.elementType=="node"&&
                                let this_node = editorTaskControl.getNodeByKey('id', e.target.id);
                                editorTaskControl.saveNodePosition({
                                    ...e.target.data,
                                    x: this_node.x,
                                    y: this_node.y
                                });
                            }
                        }
                    }
                }, 300);
            });
            this.scene.mousemove(function(e) {
                if (self.newer === 'node') {
                    self.dropX = e.x - self.config.defaultWidth;
                    self.dropY = e.y - self.config.defaultHeight / 2;
                    self.createNodeData(e, 'leaf');
                    self.newer = false;
                } else if (self.newer === 'copy') {
                    self.dropX = e.x - self.config.defaultWidth;
                    self.dropY = e.y - self.config.defaultHeight / 2;
                    self.$parent.append(e, self.preId, 1, self.dropX, self.dropY);
                    self.newer = false;
                }
                if (!self.isSelectedMode && self.beginNode);
                self.tempNodeZ.setLocation(e.x, e.y);
            });
            let linearr = [];
            let targetGroupXY = [];
            this.scene.mousedrag(function(e) {
                if (e.target != null) {
                    var bols = true;
                    function abc() {
                        $.each(JTopo.GroupContainerNode, function(i, item) {
                            if (e.target.id == item.id) {
                                bols = false;
                            }
                        });
                        return bols;
                    }
                    var abcd = abc();
                    if (!abcd) {
                        return;
                    }
                    if (e.target.elementType == 'node') {
                        editorTaskControl.mouse_number++;
                        if (e.target.dataType == 'VM') {
                            if (editorTaskControl.mouse_number == 1) {
                                targetGroupXY = [];
                            }
                            if (editorTaskControl.mouse_number == 2) {
                                let object_VM = {};
                                object_VM['x'] = e.target.x;
                                object_VM['y'] = e.target.y;
                                targetGroupXY.push(object_VM);
                            }
                        }
                        //拖动子网展示数据
                        if (e.target.dataType == 'VC') {
                            let oSnid = e.target.id;
                            $.each(JTopo.GroupContainerTopo, function(i, item) {
                                if (item.id == oSnid) {
                                    item.x = e.target.x + 20;
                                    item.y = e.target.y + 50 + 20;
                                }
                            });
                        }
                        //拖动网络下的展示数据
                        if (e.target.dataType == 'NW') {
                            if (editorTaskControl.mouse_number < 2) {
                                editorTaskControl.this_x = e.target.x;
                                editorTaskControl.this_y = e.target.y;
                                $.each(JTopo.GroupContainerNode, function(i, item) {
                                    editorTaskControl.child_x.push(item.x);
                                    editorTaskControl.child_y.push(item.y);
                                });
                            } else {
                                $.each(JTopo.GroupContainerNode, function(i, item) {
                                    if (item.finguer == e.target.id) {
                                        item.x =
                                            parseInt(editorTaskControl.child_x[i]) +
                                            parseInt(e.target.x) -
                                            parseInt(editorTaskControl.this_x);
                                        item.y =
                                            parseInt(editorTaskControl.child_y[i]) +
                                            parseInt(e.target.y) -
                                            parseInt(editorTaskControl.this_y);
                                    }
                                });
                            }
                        }
                    }
                    //拖动容器节点随动  container
                    if (e.target.elementType == 'div') {
                        $.each(JTopo.NodeGroupTopo, function(i, item) {
                            if (e.target.id == item.id) {
                                item.x = e.target.x - 20;
                                item.y = e.target.y - 50 - 20;
                            }
                        });
                    }
                }
            });
            this.stage.click(function(event) {
                // editorTaskControl.utils.hideRuleLines();
                if (event.button == 0) {
                    // 关闭弹出菜单（div）
                    $('#childrenNode').hide();
                    $('#linePanel').hide();
                    $('#stopPanel').hide();
                    $('#pauseResverPanel').hide();
                }
                $('#childrenNode').hide();
                $('#linePanel').hide();
                $('#stopPanel').hide();
                $('#pauseResverPanel').hide();
            });
        },
        updateNodeLocation(nodeObj, type) {
            //判断是增加还是删除节点  修改节点
            let _this = this;
            if (type == 'sub') {
                let index = _this.nodeLocationIdGroup.findIndex((id) => id === nodeObj.id);
                _this.nodeLocationIdGroup.splice(index, 1);
                _this.nodeLocationGroup.splice(index, 1);
            } else {
                if (_this.nodeLocationIdGroup.indexOf(nodeObj.id) == -1) {
                    //增加
                    _this.nodeLocationIdGroup.push(nodeObj.id);
                    _this.nodeLocationGroup.push(nodeObj);
                } else {
                    for (let i = 0; i < _this.nodeLocationGroup.length; i++) {
                        //更新
                        if (nodeObj.id == _this.nodeLocationGroup[i].id) {
                            _this.nodeLocationGroup[i].x = nodeObj.x;
                            _this.nodeLocationGroup[i].y = nodeObj.y;
                        }
                    }
                }
            }
        },
        addLink(item) {
            let nodeA = this.getNodeByKey('id', item.source);
            let nodeZ = this.getNodeByKey('id', item.target);
            // console.log('links', nodeZ.image.src);0
            if (!nodeA || !nodeZ) {
                return;
            }
            // console.log(nodeA, nodeZ);
            nodeA.x = Number(nodeA.x);
            nodeA.y = Number(nodeA.y);
            nodeZ.x = Number(nodeZ.x);
            nodeZ.y = Number(nodeZ.y);
            let line = new JTopo.FlexionalLink(nodeA, nodeZ);
            line.strokeColor = '0,0,0'//'163,163,163';
            line.id = item.target;
            line.data = item;
            line.direction = 'vertical';
            line.arrowsRadius = 30;
            line.arrowsOffset = -15;
            line.lineWidth = 1.5; // 1.5 线宽
            line.offsetGap = 20; //Math.abs(Math.abs(nodeZ.y) - Math.abs(nodeA.y)) / 2; // 折线拐角处的长度
            line.bundleGap = 0; // 线条之间的间隔
            line.textOffsetY = 10; // 文本偏移量（向下15个像素）
            line.lineType = 'line';
            line.type = 'tree';
            line.dataType = 'tree';
            line.zIndex = 3;
            //			line.lineWidth = self.config.lineWidth;
            // line.nodeA.setAnchors([0.5, 1, 0, 1]);
            // line.nodeB.setAnchors([0.5, 0, 0, 0]);
            this.scene.add(line);
        },
        updateNode(node, type) {
            //更新名称,图片,points数
            //获取节点详情
            let { id, name, points = [], image, isLeafNode } = this.currentNode.data;
            let currentNode = this.getNodeByKey('id', id);
            if (type === 'points') {
                //更新绑定内容树
                currentNode.data.points = node;
                currentNode.text = name + '/' + node.length;
                // 隐藏弹框
                $('#childrenNode').hide();
            } else {
                //名称和图片
                currentNode.data = {...this.currentNode.data,...node};
                currentNode.text = node.name + '/' + points.length;
                currentNode.data.typeCodeText = this.getType(currentNode.data.typeCode);
                let newimage = node.image;
                if (newimage !== image && newimage) {
                    //改变了图片
                    this.loadImage(`../Learn${newimage}`)
                        .then((img) => {
                            currentNode.image = img;
                            currentNode.data.image = newimage;
                        })
                        .catch((error) => {
                            currentNode.data.image = '';
                        });   
                } else if (newimage !== image && !newimage) {
                    //移除了图片
                    if (!isLeafNode) {
                        currentNode.setImage(require('../../../assets/tree2/start.png'));
                        // currentNode.setImage(require('../../../assets/tree/root-hover-1.png'));
                    } else {
                        currentNode.setImage(require('../../../assets/tree2/light.png'));
                        // currentNode.setImage(require('../../../assets/tree/node-hover-1.png'));
                    }
                }
                let {difficulty} = currentNode.data;
                if(difficulty === 'low'){
                    currentNode.setLevelImage(require('../../../assets/tree2/level1.png'));
                }else if(difficulty === 'middle'){
                    currentNode.setLevelImage(require('../../../assets/tree2/level2.png'));
                }else if(difficulty === 'high'){
                    currentNode.setLevelImage(require('../../../assets/tree2/level3.png'));
                }
            }
        },
        //加载图片
        loadImage(src) {
            return new Promise(function(resolve, reject) {
                let img = new Image();
                img.onload = function() {
                    //加载时执行resolve函数
                    resolve(img);
                };
                img.onerror = function() {
                    reject(src);
                };
                img.src = src;
            });
        },
        getType(typeCode){
            if(typeCode){
                let typeList = typeCode.split(',');
                return typeList.map(type => {
                    let typeInfo = this.useDictList.find(item => item.dictid ===  type);
                    if(typeInfo){
                        let direction = this.useDictList.find(item => item.dictid ===  typeInfo.parentid);
                        if(direction){
                            return direction ? direction.dictname : ''
                        }else{
                            return typeInfo ? typeInfo.dictname : ''
                        }
                    }else{
                        return ''
                    }
                }).filter(item => item).join(',')
            }else{
                return '-'
            }
        },
        //创建节点
        async createNodeContainerCode(item, isNew) {
            let { id, x = 0, y = 0, name, points = [], image, isLeafNode,typeCode,difficulty } = item;
            //生成容器
            let _this = this;
            let c = null;
            x = Number(x);
            y = Number(y);
            //图片
            c = new JTopo.Node();
            c.x = x; //+ 37;
            c.y = y; //+ 11;
            c.id = id;
            item.typeCodeText = this.getType(typeCode);
            c.data = item;
            c.width = !isLeafNode ? 168*0.8 : 267*0.8;
            c.height = !isLeafNode ? 55*0.8 : 455*0.8;
            c.dragable = this.type == 'edit' ? true : false;
            c.showSelected = this.type == 'edit' ? true : false;
            c.dataType = 'tree';
            c.alpha = this.config.nodeAlpha;
            c.strokeColor = '163,163,163';
            c.fillColor = '255,255,255';
            c.shadow = false;
            c.shadowColor = this.config.nodeShadowColor;
            c.font = '24px';
            c.fontColor = '0,0,0';
            c.borderColor = '255,255,255';
            c.borderWidth = 0;
            c.zIndex = 5;
            c.borderRadius = 0;
            c.shadowOffsetX = this.config.nodeShadowOffsetX;
            c.shadowOffsetY = this.config.nodeShadowOffsetY;
            c.topoLevel = item.deepIndex;
            // c.levelImage = '../../../assets/tree2/level1.png';
            if (isLeafNode) {
                c.text = name + '/' + points.length;
                if(difficulty === 'low'){
                    c.setLevelImage(require('../../../assets/tree2/level1.png'));
                }else if(difficulty === 'middle'){
                    c.setLevelImage(require('../../../assets/tree2/level2.png'));
                }else if(difficulty === 'high'){
                    c.setLevelImage(require('../../../assets/tree2/level3.png'));
                }
            } else {
                c.text = '开始';//name;
            }
            // c.textPosition = "Middle_Bottom";
            if (image) {
                this.loadImage(`../Learn${image}`)
                    .then((img) => {
                        image = img;
                        c.image = image;
                    })
                    .catch((error) => {
                        c.data.image = '';
                        if (!isLeafNode) {
                            // c.setImage(require('../../../assets/tree/root-default-1.png'));
                            c.setImage(require('../../../assets/tree2/start.png'));
                        } else {
                            // c.setImage(require('../../../assets/tree/node-default-1.png'));
                            c.setImage(require('../../../assets/tree2/default.png'));
                        }
                    });
            } else {
                if (!isLeafNode) {
                    // c.setImage(require('../../../assets/tree/root-default-1.png'));
                    c.setImage(require('../../../assets/tree2/start.png'));
                } else {
                    // c.setImage(require('../../../assets/tree/node-default-1.png'));
                    c.setImage(require('../../../assets/tree2/default.png'));
                }
            }
            c.addEventListener('mouseover', (e) => {
                if(this.type === "check"){
                    return
                }
                _this.setActive(e.target);
                _this.$emit('node-hover', e.target);
            });
            this.scene.add(c);
            if (!isLeafNode) {
                this.scene.centerAndZoom();
            }
        },
        myRoundNode(text, x, y) {
            var node = new JTopo.Node(text);
            node.percent = 0.1;
            node.beginDegree = 0;
            node.width = node.height = 34;
            node.setLocation(x, y);
            node.textPosition = 'Middle_Center';
            node.paint = function(g) {
                g.save();
                g.beginPath();
                g.moveTo(0, 0);
                g.fillStyle = 'rgba(22,155,213,' + this.alpha + ')'; //磨砂天蓝色
                g.arc(
                    0,
                    0,
                    this.width / 2,
                    this.beginDegree,
                    this.beginDegree + 2 * Math.PI * this.percent
                );
                g.fill();
                g.closePath();
                g.beginPath();
                g.fillStyle = 'rgba(0,0,255,' + this.alpha + ')'; //深蓝色
                g.moveTo(0, 0);
                g.arc(0, 0, this.width / 2 - 8, this.beginDegree, this.beginDegree + 2 * Math.PI);
                g.fill();
                g.closePath();
                g.restore();
                this.paintText(g);
            };
            // that_this.add(node);
            return node;
        },
        getNodeByKey(key, value) {
            var node = null;
            this.stage.childs.forEach(function(s) {
                s.childs.forEach(function(n) {
                    if (n.elementType === 'node' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        getContainerByKey(key, value) {
            var node = null;
            this.stage.childs.forEach(function(s) {
                s.childs.forEach(function(n) {
                    if (n.elementType === 'container' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        getLinekByKey(key, value) {
            var node = null;
            this.stage.childs.forEach(function(s) {
                s.childs.forEach(function(n) {
                    if (n.elementType == 'link' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        //获取当前节点
        getSelectedNodes(includeContainer) {
            var selectedNodes = [];
            var nodes = this.scene.selectedElements;
            return nodes;
            return (
                nodes.forEach(function(n) {
                    if (n.elementType === 'node') selectedNodes.push(n);
                    if (includeContainer && n.elementType === 'div') selectedNodes.push(n);
                }),
                selectedNodes
            );
        },
        initNodeDeailInformation(nodeId) {
            this.nodeJSONstring = this.getNodeByKey('id', nodeId);
        },
        //修改节点(更新节点位置)
        saveNodePosition(obj) {
            if (this.type !== 'edit') {
                return;
            }
            let _this = this;
            let data = { ...obj, x: obj.x.toFixed(2), y: obj.y.toFixed(2) };
            modifySkillChapter(data).then((data) => {
                if (data.code == 1) {
                    _this.updateNodeLocation(obj, 'add');
                } else {
                    _this.$Message.error(data.message);
                }
            });
        },
        initNodeFindChildrenNode(obj) {
            let _this = this;
            return axios({
                url: this.GLOBAL._projPath_task + 'nodes/' + obj.id + '/links'
            }).then((response) => {
                if (response.code == 1) {
                    let steps = {};
                    steps['count'] = Number(response.data.sources.length);
                    steps['oList'] = response.data.sources;
                    return steps;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        // 添加子步骤调用的函数
        addChildrenStep(value) {
            // console.log(value)
            $('#childrenNode').hide();
            this.addChildrenNodeAndLink();
        },
        // 创建子步骤节点和连线
        async addChildrenNodeAndLink() {
            let stepNumbers = null;
            let _this = this;
            await this.initNodeFindChildrenNode(this.nodeJSONstring).then((value) => {
                // console.log(value)
                stepNumbers = value;
            });
            let bol = this.changeNodePosition(stepNumbers.oList, stepNumbers.count);
            // console.log(stepNumbers);
            let oX = this.nodeJSONstring.x + 234;
            let oY;
            //生成一个节点
            var newNode = new JTopo.Node();
            newNode.id = '';
            newNode.alpha = _this.config.nodeAlpha;
            newNode.strokeColor = _this.config.nodeStrokeColor;
            newNode.shadow = _this.config.nodeShadow;
            newNode.shadowColor = _this.config.nodeShadowColor;
            newNode.font = _this.config.nodeFont;
            newNode.fontColor = _this.config.nodeFontColor;
            newNode.borderRadius = 5;
            newNode.borderWidth = 0;
            newNode.borderColor = '255,255,255';
            newNode.fillColor = '255,255,255'; //添加子步骤的填充色
            newNode.shadowOffsetX = _this.config.nodeShadowOffsetX;
            newNode.shadowOffsetY = _this.config.nodeShadowOffsetY;
            newNode.transformAble = true;
            newNode.visible = true;
            newNode.dragable = true;
            newNode.selected = false;
            newNode.showSelected = true;
            newNode.isMouseOver = false;
            newNode.topoLevel = 0;
            newNode.parentLevel = 0;
            newNode.arrowsRadius = 10;
            newNode.width = 120;
            newNode.height = 34;
            newNode.deviceId = '' + new Date().getTime() * Math.random();
            newNode.dataType = 'process';
            newNode.textPosition = 'Middle_Center'; // 文字水平垂直居中
            newNode.overflow = 'hidden';
            newNode.text_overflow = 'ellipsis';
            newNode.white_space = 'nowrap';
            newNode.text = '步骤' + ++this.modeIdIndex;
            if (!bol) {
                oY = this.nodeJSONstring.y - ((stepNumbers.count + 1) / 2) * 100;
            } else {
                oY = this.nodeJSONstring.y;
            }
            newNode.setLocation(oX, oY);
            let saveNodeId = '';
            await this.addNodeChildrenSaveNodeAndLine('步骤' + this.modeIdIndex, oX, oY).then(
                (value) => {
                    saveNodeId = value;
                }
            );
            if (saveNodeId) {
                newNode.id = saveNodeId;
                this.scene.add(newNode);
                let oLineId = '';
                await this.createLink(this.nodeJSONstring.id, saveNodeId, '').then((value) => {
                    // console.log(value);
                    oLineId = value;
                });
                if (oLineId) {
                    this.createLinkTopo(
                        this.getNodeByKey('id', this.nodeJSONstring.id),
                        newNode,
                        oLineId
                    );
                }
            }
            // 步骤名称---溢出隐藏省略号
            if (newNode.text.length > 10) {
                newNode.text =
                    '   ' + newNode.text.slice(0, 10) + '|' + '   ' + newNode.text.slice(10, 20);
            }
            // console.log('xxxx', item);
            if (
                item.nodeType != 'start' &&
                item.nodeType != 'stop' &&
                item.nodeType != 'process' &&
                item.nodeType != 'pause' &&
                item.nodeType != 'recovery'
            ) {
                // AA
                if (item.auoStart === true && item.autoStop === true) {
                    if (newNode.dataType == 'configSing') {
                        // newNode.setImage(require('../../../assets/taskEditor/aaconfigSing.png'));
                    }
                    if (newNode.dataType == 'dataPers') {
                        // newNode.setImage(require('../../../assets/taskEditor/aadataPers.png'));
                    }
                }
                // MM
                if (item.sutoStart === false && item.autoStop === false) {
                    if (newNode.dataType == 'configSing') {
                        // newNode.setImage(require('../../../assets/taskEditor/mmconfigSing.png'));
                    }
                    if (newNode.Type == 'dataPers') {
                        // newNode.setImage(require('../../../assets/taskEditor/mmdataPers.png'));
                    }
                }
                // AM
                if (item.autoStart === true && item.autoStop == false) {
                    if (newNode.dataType == 'configSing') {
                        // newNode.setImage(require('../../../assets/taskEditor/amconfigSing.png'));
                    }
                    if (newNode.dataType == 'dataPers') {
                        // newNode.setImage(require('../../../assets/taskEditor/amdataPers.png'));
                    }
                }
                //  MA
                if (item.autoStart === false && item.autoStop === true) {
                    if (newNode.nodeType == 'configSing') {
                        //    newNode.setImage(reuire('../../../assets/taskEditor/maconfigSing.png'));
                    }
                    if (newNode.nodeType == 'dataPers') {
                        //    newNode.setImage(require('../../../assets/taskEditor/madataPers.png'));
                    }
                }
                //  文字水平垂直居中
                newNode.textPosition = 'Middle_Center';
            }
        },
        /**
         * @description: 添加子步骤核心代码
         * @param {type}
         * @return:
         */
        changeNodePosition(GroupId, n) {
            let _this = this;
            let y_value = 100;
            let x_value = 234;
            //第一步先拿到母节点
            let nodeMother = _this.getNodeByKey('id', _this.nodeJSONstring.id);
            let oX = nodeMother.x;
            let oY = nodeMother.y;
            let unevenNumberBol = true;
            let currentNode, xN, yN;
            if (GroupId) {
                $.each(GroupId, function(i, item) {
                    currentNode = _this.getNodeByKey('id', item);
                    let oValue = i / 2;
                    if (i % 2 == 0) {
                        if (i == 0) {
                            currentNode.setLocation(oX + x_value, oY + (i + 1) * y_value);
                            yN = oY + (i + 1) * y_value;
                        } else {
                            currentNode.setLocation(oX + x_value, oY + (i / 2 + 1) * y_value);
                            yN = oY + (i / 2 + 1) * y_value;
                        }
                        xN = oX + x_value;
                        console.log(oY + '==' + yN + '==' + i + '上');
                    } else {
                        if (i == 1) {
                            currentNode.setLocation(oX + x_value, oY - i * y_value);
                            xN = oX + x_value;
                            yN = oY - i * y_value;
                        } else {
                            currentNode.setLocation(oX + x_value, oY - ((i + 1) / 2) * y_value);
                            xN = oX + x_value;
                            yN = oY - ((i + 1) / 2) * y_value;
                        }
                        console.log(oY + '==' + yN + '==' + i + '下');
                    }
                    _this.saveNodePosition({
                        id: item,
                        x: xN,
                        y: yN
                    });
                });
                if (parseInt(n) % 2 == 0) {
                    //偶数
                    unevenNumberBol = true;
                    //计算节点的位置
                } else {
                    //奇数
                    unevenNumberBol = false;
                }
            }
            //判断子节点的个数是奇数还是偶数
            return unevenNumberBol;
        },
        addNodeChildrenSaveNodeAndLine(text, x, y) {
            let _this = this;
            return axios({
                url: this.GLOBAL._projPath_task + '/nodes',
                method: 'POST',
                data: {
                    nodeType: 'process',
                    testId: this.currentSceneId,
                    title: text,
                    x: x,
                    y: y
                }
            }).then((response) => {
                if (response.code == 1) {
                    return response.data.id;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        /**
         * @description: 检查是否有别的连线
         * @param {type}
         * @return:
         */
        detectsAnotherConnection() {
            let _this = this;
            return axios({
                url: this.GLOBAL._projPath_task + '/tests/' + _this.currentSceneId + '/editor'
            }).then((response) => {
                if (response.code == 1) {
                    return response.data.links;
                } else {
                }
            });
        },
        /**
         * 创建新的连线
         */
        async createLink(sourceId, targetId, line) {
            if (this.type !== 'edit') {
                this.scene.remove(line);
                return;
            }
            let _this = this;
            let oLineks = line.nodeZ.inLinks; //连到目标节点的线
            let iLinks = line.nodeZ.outLinks.map((link) => link.id); //目标节点连接出去的线
            //oLineks.length > 1
            if ( !line.nodeZ.data.isLeafNode || iLinks.includes(sourceId)) {
                //目标节点已经是别人的目标，目标节点是根节点,已经有连线
                this.scene.remove(line);
                return;
            }
            //检查是否有别的连线
            // await this.detectsAnotherConnection().then((value)=>{
            //     oLineks = value
            // });
            // let targetGroup = [];
            // $.each(oLineks, function(i,item) {
            //     targetGroup.push(item.target);
            // });
            // if(targetGroup.indexOf(targetId)!=-1){
            // }
            let data = {
                careerSkillId: this.$route.query.id,
                source: sourceId,
                target: targetId
            };
            addLink(data).then(({ code, data, message }) => {
                if (code == 1) {
                    if (line) {
                        line.id = targetId;
                        line.data = data;
                    }
                    return targetId;
                } else {
                    if (line) {
                        _this.scene.remove(line);
                    }
                    this.$Message.error(message);
                }
            });
        },
        createLinkTopo: function(nodeA, nodeZ, oid) {
            var link = new JTopo.FlexionalLink(nodeA, nodeZ);
            link.direction = 'horizontal';
            link.arrowsRadius = 10;
            link.lineWidth = 1.5; // 线宽
            link.offsetGap = 20;
            link.bundleGap = 15; // 线条之间的间隔
            link.textOffsetY = 10; // 文本偏移量（向下15个像素）
            link.strokeColor = '201,201,202';
            link.id = oid;
            this.scene.add(link);
            return link;
        },
        //删除节点
        deleteStep() {
            $('#childrenNode').hide();
            $('#stopPanel').hide();
            let _this = this;
            this.$Modal.confirm({
                title: '删除',
                content: '您确定要删除该节点吗？',
                onOk: () => {
                    _this.deleteNode();
                },
                onCancel: () => {}
            });
        },
        deleteNode() {
            let _this = this;
            _this.$parent.delItem(_this.currentNode).then((data) => {
                _this.modeIdIndex--;
                let node = _this.getNodeByKey('id', _this.currentNode.id);
                _this.scene.remove(node);
                _this.updateNodeLocation({ id: _this.currentNode.id }, 'sub');
                // 清空当前节点
                _this.currentNode = {data:{}};
                _this.$emit('node-hover',_this.currentNode);
            });
        },
        //删除连线
        deleteLine(targetId, line) {
            $('#linePanel').hide();
            if (this.type !== 'edit') {
                return;
            }
            let _this = this;
            this.$Modal.confirm({
                title: '删除',
                content: '您确定要删除该连线吗？',
                onOk: () => {
                    // _this.deleteNode();
                    delLink(line.data.id).then(({ code, data, message }) => {
                        if (code == 1) {
                            if (line) {
                                _this.scene.remove(line);
                            }
                        } else {
                            _this.$Message.error(message);
                        }
                    });
                },
                onCancel: () => {}
            });
        },
        dragImage(modeDiv, drawArea, text) {
            console.log(modeDiv);
            console.log(drawArea);
            drawArea = document.getElementById(`drawCanvasTeaskNew-${this.treeId}-${this.type}`);
            if (!text) text = '';
            var self = this;
            console.log(text);
            //拖拽开始,携带必要的参数 [增加参数vmtype]
            modeDiv.ondragstart = function(e) {
                e = e || window.event;
                try {
                    //IE只允许KEY为text和URL
                    e.dataTransfer.setData(
                        'text',
                        backImg + ';' + text + ';' + datatype + ';' + vmtype + ';' + tamplteId
                    );
                } catch (ex) {}
                return false;
            };
            //阻止默认事件
            drawArea.ondragover = function(e) {
                e.preventDefault();
                return false;
            };
            //创建节点 [增加参数vmtype]
            drawArea.ondrop = function(e) {
                e = e || window.event;
                var data = e.dataTransfer.getData('text');
                var img, text, datatype, vmtype, tamplteId;
                if (data) {
                    var datas = data.split(';');
                    // console.log(datas);
                    // console.log(datas.length);
                    if ((datas && datas.length == 5) || datas.length == 4) {
                        img = datas[0];
                        text = datas[1];
                        datatype = datas[2];
                        vmtype = datas[3];
                        tamplteId = datas[4];
                        testControl.createNode(e, text, img, datatype);
                    }
                }

                if (e.preventDefault()) {
                    e.preventDefault();
                    return false;
                }
                if (e.stopPropagation()) {
                    e.stopPropagation();
                    return false;
                }
            };
        },
        createNodeData(e, dataType) {
            if (this.type != 'edit') {
                return;
            }
            let _this = this;
            let text =
                dataType == 'root' ? '开始' : '节点' + ++this.modeIdIndex;
            let x, y;
            if (dataType === 'root') {
                x = this.$el.offsetWidth / 2;
                y = 100;
            } else {
                x = this.dropX;
                y = this.dropY;
            }
            //判断是创建节点还是添加任务
            let bol = true,
                currentNodeId = null;
            //
            // for (let index = 0; index < _this.nodeLocationGroup.length; index++) {
            //     const element = _this.nodeLocationGroup[index];
            //     console.log(element);
            //     if(Math.abs(OX-element.x)<=100&&Math.abs(OY-element.y)<=50){//比较X坐标
            //         if(element.nodeType=="stop"||element.nodeType=="start"){
            //             if(element.nodeType=="stop"){
            //                 _this.$Message.info("结束节点不允许配置任务")
            //             }else if(element.nodeType=="start"){
            //                 _this.$Message.info("开始节点不允许配置任务")
            //             }
            //             return;
            //         }else{
            //             currentNodeId = element.id;
            //             bol = false;
            //             break;
            //         }

            //     }
            // }
            //extension处理---extension原始值
            let originExtension = [
                { type: 0, content: '默认' },
                { type: 1, content: '默认' },
                { type: 2, content: '默认' },
                { type: 3, content: 60 },
                // { type: 4, content: 50 }
            ];
            const extensionStr = JSON.stringify(originExtension);
            let data = {
                careerSkillId: this.$route.query.id, //技能树id
                name: text,
                difficulty: 'low',
                typeCode: '', //10001
                direction: '',
                isLeafNode: dataType == 'root' ? 0 : 1,
                type: '1',
                extension: extensionStr,
                image: '',
                x: x.toFixed(2),
                y: y.toFixed(2)
            };
            data.dirLevel = 1; //层级
            data.label = 1; //第几个
            //创建节点,默认数据创建
            addSkillChapter(data).then((res) => {
                if (res.code == 1) {
                    // _this.$Message.info('添加技能树节点成功');
                    _this.nodeLocationGroup.push(res.data), //存储位置
                        _this.nodeLocationIdGroup.push(res.data.id),
                        _this.createNodeContainerCode(res.data); //创建容器节点
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        drop(event) {
            this.dropX =
                (event.layerX ? event.layerX : event.offsetX) -
                this.scene.translateX -
                this.config.defaultWidth;
            this.dropY =
                this.scene.scaleX * (event.layerY ? event.layerY : event.offsetY) -
                this.scene.translateY -
                this.config.defaultHeight * 1.5;
            if (event.dataTransfer.getData('dataType') === 'leaf') {
                if (this.scene.scaleX == 1) {
                    this.createNodeData(event, event.dataTransfer.getData('dataType'));
                } else {
                    this.newer = 'node';
                }
            } else if (event.dataTransfer.getData('dataType') === 'tree') {
                //当前drop位置，复制时需要根据drop位置更新节点位置
                if (this.scene.scaleX == 1) {
                    this.$parent.append(event, this.preId, 1, this.dropX, this.dropY);
                } else {
                    this.newer = 'copy';
                }
            } else {
                this.$Message.info('请拖拽文字或者图片');
            }
        },
        setBtnShow() {
            let treesScrollWrapper = document.querySelector('.treeListScrollWrapper');
            let treesWrapper = document.querySelector('.treeListWrapper');
            if (!treesWrapper) {
                return;
            }
            let scrollWidth = treesWrapper.offsetWidth;
            let width = treesScrollWrapper.offsetWidth;
            if (width > scrollWidth) {
                this.showNavBtn = false;
            } else {
                this.showNavBtn = true;
            }
            //监控元素变化
            if (this.elementResizeDetectorMaker) {
                return;
            }
            this.elementResizeDetectorMaker = require('element-resize-detector');
            let erd = this.elementResizeDetectorMaker();
            let that = this;
            erd.listenTo(treesScrollWrapper, function(element) {
                that.$nextTick(function() {
                    this.setBtnShow();
                });
            });
        },
        handleClick(direction) {
            if (!this.curScoll) {
                this.curScoll = 0;
            }
            let treesScrollWrapper = document.querySelector('.treeListScrollWrapper');
            let treesWrapper = document.querySelector('.treeListWrapper');
            let scrollWidth = treesWrapper.offsetWidth;
            let width = treesScrollWrapper.offsetWidth;
            let maxScroll = scrollWidth - width;
            if (direction === 'right') {
                this.curScoll = Math.min((this.curScoll += width), maxScroll);
            } else {
                this.curScoll = Math.max((this.curScoll -= width), 0);
            }

            if (this.curScoll === 0) {
                this.disPrevBtn = true;
                this.disNextBtn = false;
            } else if (this.curScoll == maxScroll) {
                this.disPrevBtn = false;
                this.disNextBtn = true;
            } else {
                this.disPrevBtn = false;
                this.disNextBtn = false;
            }
            treesWrapper.style.transform = `translate(-${this.curScoll}px)`;
        }
    }
};
</script>

<style>
.modeRight2 {
    position: absolute;
    width: 191px;
    display: none;
    background-color: #ffffff;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
}
.modeRight2 > div {
    height: 33px;
    line-height: 33px;
    padding-left: 17px;
    text-align: left;
}
#contextBodyTaskPcNew {
    height: calc(100% - 60px);
    /* 导调流程的背景图 */
    /* background: url('../../../assets/processControl/B2.png');  */
}
.opertionVm .ivu-select-arrow {
    right: 2px;
}
.opertionVm .ivu-select-selection {
    border-radius: 0px 4px 4px 0px;
}
.taskConfigerName {
    display: inline-block;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
    width: 150px;
}
.taskName {
    display: block;
    width: 200px;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
}
.taskType {
    display: inline-block;
    width: 150px;
    text-align: left;
}

.demo-split {
    height: 100%;
    border: 1px solid #dcdee2;
}
.demo-split-pane {
    padding: 10px;
}
.ivu-steps.ivu-steps-small .ivu-steps-title {
    color: #fff !important;
}
</style>
<style scoped>
.ivu-steps.ivu-steps-small .ivu-steps-title {
    color: #fff !important;
}
.treeWrap{
  color:#515a6e !important;
}
/deep/ .ivu-divider{
  background: #e8eaec;
}
.treeList /deep/ .ivu-input{
  border: 1px solid #dcdee2 !important;
  color: #515a6e  !important;
}
.treeList /deep/ .ivu-icon-ios-arrow-back ,.treeList /deep/ .ivu-icon-ios-arrow-forward{
  color:#ccc !important;
}

.treeItem .ivu-input-number{
  border: 1px solid #dcdee2 !important;
}
.treeList .ivu-divider {
  background: #e8eaec;
}
.treeList .ivu-page{
  color: #515a6e;
}



.rightTaskZone {
position: absolute;
top: 30%;
right: 0;
margin-right: 16px;
}
/* 分割线 */
.ivu-divider-horizontal {
    display: block;
    height: 1px;
    width: 100%;
    min-width: 100%;
    margin: 0px 0;
    clear: both;
}

.rightNav {
    padding: 8px 6px;
    writing-mode: vertical-lr;
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    cursor: pointer;
}
.activeRightNav {
    border: 1px solid #2d8cf0;
    color: #2d8cf0;
    border-radius: 3px;
    background-color: transparent;
}
.dragImage {
    width: 16px;
    height: auto;
}
.treeList {
    display: inline-flex;
    height: 80px;
    padding: 10px;
    /* position: sticky;
    top: 0; */
    color:#515a6e;
    background: #fff;
    width: 100%;
    overflow: hidden;
    box-shadow: 0px 0px 1px 3px #eee;
}

.treeListWrapper {
    display: inline-flex;
    height: 100%;
    transition: transform 1s;
}
.treeListWrapper {
    display: inline-flex;
    height: 100%;
    transition: transform 1;
}
.treeItem {
    display: flex;
    align-items: center;
    flex: 0 0 100px;
    padding: 8px 6px;
    margin: 0 5px;
    background: #f0f5ff;
    border-color: #adc6ff;
    cursor: move;
}
.treeItem.active {
    background: rgb(0, 127, 238);
    color: #fff;
}
.treeItem img {
    margin-right: 10px;
}
.treeName {
    width: 60px;
    word-break: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.preTreeCanvas {
    height: 100%;
    background: #fff;
}
.navBtn {
    display: flex;
    align-items: center;
    background: #efefef;
}
.navBtn >>> .ivu-icon {
    color: #bbb;
}
.not-allowed {
    cursor: not-allowed;
}
.pointer {
    cursor: pointer;
}
/*@font-face {*/
/*  font-family: "YouSheBiaoTiHei";*/
/*  src: url("../../../assets/font/YouSheBiaoTiHei-2.ttf"); !* 省略其他格式 *!*/
/*}*/
</style>
